<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Orientation Test using classnames</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="../iui/iui.css" type="text/css" />

<link rel="stylesheet" title="Default" href="../iui/t/default/default-theme.css"  type="text/css"/>
<script type="application/x-javascript" src="../iui/iui.js"></script>
<style type="text/css">
   /* CSS to add ": True" or ": False" after headings to indicate orientation */
   /* These rules look for a body class of either "landscape" or "portrait" */
   div.panel > h2:after { content: ":  False"; }
   div.panel > h2.neither:after { content: ":  True"; }
   body.landscape > div.panel > h2.landscape:after { content: ":  True"; }
   body.landscape > div.panel > h2.neither:after { content: ":  False"; }
   body.portrait> div.panel > h2.portrait:after { content: ":  True"; }
   body.portrait > div.panel > h2.neither:after { content: ":  False"; }
</style>
</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
    </div>
    
    <div id="main" title="Orient @class" class="panel" selected="true">
        <h2 class="portrait">Portrait</h2>
        <h2 class="landscape">Landscape</h2>
        <h2 class="neither">Unknown</h2>
    </div>
</body>
</html>
